<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" lang="en">
<head>
    <meta charset="UTF-8"/>
    <meta http-equiv="X-UA-COMPATIBLE" content="IE=edge"/>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <title>聊天室</title>
    <script th:src="@{js/sockjs.js}"></script>
    <script th:src="@{js/stomp.js}"></script>
    <script th:src="@{js/jquery-2.2.3.js}"></script>
</head>
<body>
<p>聊天室</p>
<form id="bartonForm">
    <textarea rows="4" cols="60" name="text"></textarea>
    <input type="submit"/>
</form>
<script th:inline="javascript">

    $("#bartonForm").submit(function (e) {
        e.preventDefault();
        var text = $(this).find("textarea[name='text']").val();
        sendSpittle(text);
    });

    var sock = new SockJS("/endpointChat");
    var stomp = Stomp.over(sock);
    stomp.connect("guest", "guest", function (frame) {
        console.log("frame:" + frame);
        stomp.subscribe("/user/queue/notifications", handleNotification);
    });

    function handleNotification(message) {
        console.log("message:" + message);
        $("#output").append("<b>Received:" + message.body + "</b><br/>");
    }

    function sendSpittle(text) {
        stomp.send("/chat", {}, text);
    }

    $("#stop").click(function () {
        sock.close();
    });

</script>

<div id="output"></div>
</body>
</html>